<template>
    <div class="con">
        <div class="login">
            <div class="djx">
                <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="用户名" prop="userName">
                        <el-input type="text" v-model="ruleForm.userName" autocomplete="off" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password" autocomplete="off" size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="register" size="small">注册</el-button>
                        <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
                        <el-button @click="tologin" size="small">已有用户</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script >
export default {
    data() {
        return {
            ruleForm: {
                userName:'',
                password:''
            },
        };
    },
    methods: {
        async register() {
            await this.$axios.post('http://localhost:3000/register',
                {
                    userName: this.ruleForm.userName,
                    password: this.ruleForm.password,
                })
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        this.$router.push('/')
                        alert('是否返回登录页面')
                    }
                    if (res.data.code == 400) {
                        alert('用户名已存在')
                    }
                })
                .catch(err => {
                    console.log('操作失败' + err);
                })
        },
        tologin() {
            this.$router.push("/")
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    mounted() {

    },
}
</script>

<style>
.con {
    display: flex;
    justify-content: center;
    width: 1300px;
    height: 500px;
}

.login {
    background: url("../assets/img/login_bg.jpg");
    background-color: white;
    width: 100%;
}

.djx {
    width: 30%;
    padding: 100px 60px;
    float: right;
}
</style>